<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>天气案例监视属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <!--ishot ? "炎热" : "凉爽"    三元表达式-->
      <h2>今天天气很{{info}}</h2>
      <br />
      <h2>出去玩不玩？{{playPlan}}</h2>
      <button @click="changeWeather">切换天气，函数方式</button>
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        //boolean值，天气热不热
        isHot: true,
        isPlay: true,
      },
      computed: {
        info() {
          return this.isHot ? "炎热" : "凉爽";
        },
        playPlan() {
          return this.isPlay ? "太热不出去玩" : "天气不错，出去玩";
        },
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot;
          this.isPlay = !this.isPlay;
        },
      },
      //创建一个监视对象，统一配置各种监视属性
      watch: {
        //1：同样为监视属性名，操作对象
        isHot: {
          //immediate初始化时让handler执行一次，默认false
          immediate: true,

          //通过handler方法监视属性，当属性值发生修改时触发
          handler(newValue, oldValue) {
            //可添加两个参数，第一个参数是新数据，第二个参数是老数据
            console.log(
              "默认属性isHot被修改了，新值" + newValue + "，旧值" + oldValue
            );
          },
        },
        //2：同样的，也可监视计算属性
        info: {
          immediate: true,
          handler(newValue, oldValue) {
            console.log(
              "计算属性info被修改了，新值" + newValue + "，旧值" + oldValue
            );
          },
        },
      },
    });

    //3：在外部给VM添加监视属性，注意属性要带引号(上面的是内部省略了)   第二个参数为监视操作函数
    vm.$watch("playPlan", {
      immediate: true,
      handler(newValue, oldValue) {
        console.log(
          "计算属性playPlan被修改了，新值" + newValue + "，旧值" + oldValue
        );
      },

      //4：在创建实例时确认监视目标，使用1，2方式。    如果不确定，可在后续补充VM的监视属性
    });
  </script>
</html>
